<template>
	<div class="search_all_form">
		<div class="form">
			<el-input placeholder="请输入内容" clearable v-model="searchParams.value" @keyup.enter.native="handleClickSearch()">
				<el-select v-model="searchParams.field" slot="prepend" placeholder="请选择" style="width: 105px">
					<el-option label="全部" value="all"></el-option>
					<el-option v-for="(item, index) in searchFields" :key="index" :label="item.label" :value="item.value"></el-option>
				</el-select>
				<template v-if="isShow">
					<el-select v-model="searchParams.type" slot="append" placeholder="请选择" style="width: 80px">
						<el-option v-for="(item, index) in searchTypes" :key="index" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</template>
			</el-input>
			<el-button type="primary" icon="el-icon-search" @click="handleClickSearch()">搜索</el-button>
			<el-button type="info">结果中检索</el-button>
		</div>
	</div>
</template>

<script>
import lodash from 'lodash';
import { searchFields, searchTypes } from '../common/searchConfig';
export default {
	data() {
		return {
			searchTypes: searchTypes,
			searchFields: searchFields,
			searchParams: { field: 'all', type: 'query_string', value: '' }
		};
	},
	computed: {
		routeQuery() {
			return this.$route.query || {};
		},
		isShow() {
			return ['all', 'catalogValue', 'labelList'].indexOf(this.searchParams.field) === -1;
		}
	},
	methods: {
		handleClickSearch() {
			let params = this.formatQueryParams();
			this.$emit('search', params);
		},

		//格式化搜索参数
		formatQueryParams() {
			let dataArr = [];
			let paramsData = lodash.cloneDeep(this.searchParams);
			if (paramsData.field === 'all') {
				dataArr = searchFields.map((item) => {
					let obj = { bool: 'should', title: item.value };
					let listObj = { value: [paramsData.value] };
					if (item.type === 'string') {
						obj['type'] = paramsData.type;
						obj['value'] = paramsData.value;
						obj['field'] = item.value;
					} else if (item.type === 'array') {
						obj['type'] = 'terms';
						obj['value'] = !paramsData.value ? [] : [paramsData.value];
						obj['path'] = 'Story_listMap';
						obj['field'] = `Story_listMap.${item.value}`;
					}
					return obj;
				});
			} else {
				let dataObj = searchFields.find((item) => item.value === paramsData.field);
				if (dataObj.type === 'string') {
					dataArr = [{ bool: 'should', title: dataObj.value, ...paramsData }];
				} else if (dataObj.type === 'array') {
					let listObj = { bool: 'should', title: dataObj.value };
					listObj['type'] = 'terms';
					listObj['value'] = !paramsData.value ? [] : [paramsData.value];
					listObj['path'] = 'Story_listMap';
					listObj['field'] = `Story_listMap.${dataObj.value}`;
					dataArr = [{ ...listObj }];
				}
			}
			return dataArr;
		}
	}
};
</script>

<style lang="scss" scoped>
.search_all_form {
	width: 976px;
	margin: 0 auto;
	padding-left: 128px;
	box-sizing: border-box;

	.form {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.el-input-group {
		width: 619px;
		flex-shrink: 0;
	}

	.el-button {
		display: flex;
		align-items: center;
		font-size: 16px;
		margin-left: 10px;
		padding: 11px 18px;
	}
}
</style>
